"use client";

import { ChevronRight, Home } from "lucide-react";
import { Button } from "./button";

interface BreadcrumbProps {
    path: string;
    onNavigate: (path: string) => void;
}

export function Breadcrumb({ path, onNavigate }: BreadcrumbProps) {
    const segments = path.split("/").filter(Boolean);

    const handleClick = (index: number) => {
        const newPath = segments.slice(0, index + 1).join("/");
        onNavigate(newPath);
    };

    return (
        <nav className="flex items-center space-x-1 text-sm text-muted-foreground">
            <Button variant="ghost" size="sm" onClick={() => onNavigate("")} className="h-6 px-2">
                <Home className="h-3 w-3" />
            </Button>

            {segments.map((segment, index) => (
                <div key={index} className="flex items-center space-x-1">
                    <ChevronRight className="h-3 w-3" />
                    <Button variant="ghost" size="sm" onClick={() => handleClick(index)} className="h-6 px-2">
                        {segment}
                    </Button>
                </div>
            ))}
        </nav>
    );
}
